@font-face { font-family: 'Fontin'; src: url('Fontin-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Fontin'; src: url('Fontin-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Fontin'; src: url('Fontin-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; }

a[href] { color: #33f; }
a:link { text-decoration: none; }
h1 { font-size: 2rem; margin: 0 0 1rem; border-bottom: double #000; }
h2 { font-size: 1.5rem; margin: 1.2rem 0 1rem; border-bottom: 1px solid #000; }
h3 { font-size: 1.2rem; margin: 1.2rem 0 0.3rem; }

body { font-family: Fontin, serif; background: #333; margin: 8px 8px 32px; }
main { background: #fff; max-width: 800px; margin: 0 auto; padding: 1rem 2rem 2rem; }
footer { max-width: 800px; margin: 16px auto 0; text-align: center; color: #ccc; }
footer a[href] { color: #99f; }

#player { position: fixed; bottom: 8px; right: 8px; }
audio:focus { outline: none; }
.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 0.5s linear 1.5s;
}
.play { color: #33f; }
.play.playing { color: red; }
.play:before { content: "\1f508"; }
.play.playing:before { content: "\1f50a"; }
.play.no-audio:before { content: "\1f507"; }
.note { font-size: 0.85rem; }

dl { margin: 0; }
dt { margin-bottom: 0.5rem; }
dd { margin-left: 3rem; margin-bottom: 1rem; }

dd.manual { color: #640; }